<template>
  <div class="app-container">
    <!-- 入库单数据 -->
    <el-row :gutter="20">
      <el-col :span="24" class="card-box">
        <el-card>
          <div>
            <h3>销售订单明细</h3>
          </div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="75px"
          >
            <el-form-item label="订单编号" prop="arriveBillNo">
              <el-input
                v-model="queryParams.arriveBillNo"
                placeholder="请输入订单编号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="订单状态" prop="billStatus">
              <el-select
                v-model="queryParams.billStatus"
                placeholder="请选择订单状态"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in billStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="cyan"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            v-loading="loading"
            :data="arriveBillDetailList"
            @row-click="handleRowClick"
          >
            <el-table-column label="序号" align="center" prop="rowId" width="50"/>
            <el-table-column
              label="订单编号"
              align="center"
              prop="arriveBillNo"
            />
            <el-table-column
              label="物料编号"
              align="center"
              prop="materialNo"
            />
            <el-table-column
              label="物料名称"
              align="center"
              prop="materialName"
            />
            <el-table-column label="规格" align="center" prop="materialSpec" />
            <el-table-column
              label="类别"
              align="center"
              prop="materialCategoryName"
            />
            <el-table-column
              label="单位"
              align="center"
               width="50"
              prop="materialUnit"
              :formatter="materialUnitFormat"
            />
            <el-table-column label="单价" align="center" prop="price" />
            <el-table-column label="计划数量" align="center" prop="planNum" />
            <el-table-column label="合格数量" align="center" prop="actualNum" />
            <el-table-column
              label="供应商"
              align="center"
              prop="supplierName"
              width="100"
            />
            <el-table-column label="采购者" align="center" prop="buyBy" width="70"/>
            <el-table-column
              label="采购时间"
              align="center"
              prop="buyTime"
              width="150"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.buyTime, "{y}-{m}-{d}") }}</span>
              </template>
            </el-table-column>
            <el-table-column label="检验者" align="center" prop="checkBy" />
            <el-table-column
              label="检验时间"
              align="center"
              prop="checkTime"
              width="150"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.checkTime, "{y}-{m}-{d}") }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="收货人" align="center" prop="recieveBy" />
            <el-table-column
              label="收货时间"
              align="center"
              prop="recieveTime"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.recieveTime, "{y}-{m}-{d}")
                }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="是否检验" align="center" prop="isChecked" />
            <el-table-column
              label="是否收货"
              align="center"
              prop="isRecieved"
            />
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

          <div style="position: absolute; height: 30px">
            <div style="margin-top: -20px; position: relative; float: left">
              <label for="">{{ queryDetailParams.toString }}</label>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 入库单明细 -->
    <el-row :gutter="20">
      <el-col :span="24" class="card-box">
        <el-card>
          <div>
            <h3>入库单明细</h3>
          </div>

          <el-table v-loading="loading" :data="materialOutInDetailList">
            <el-table-column label="仓库" align="center" prop="wareName" />
            <el-table-column
              label="库位编号"
              align="center"
              prop="wareLocatorNo"
            />
            <el-table-column
              label="库位名"
              align="center"
              prop="wareLocatorName"
            />
            <el-table-column label="订单编号" align="center" prop="billNo" />
            <el-table-column
              label="订单明细号"
              align="center"
              prop="billDetailId"
            />
            <el-table-column
              label="原料编号"
              align="center"
              prop="materialNo"
            />
            <el-table-column
              label="原料名称"
              align="center"
              prop="materialName"
            />
            <el-table-column label="规格" align="center" prop="materialSpec" />
            <el-table-column
              label="单位"
              align="center"
              prop="materialUnit"
              :formatter="materialUnitFormat"
            />
            <el-table-column
              label="类型"
              align="center"
              prop="materialCategoryName"
            />
            <el-table-column
              label="出入库类型"
              align="center"
              prop="outInType"
              :formatter="outInTypeFormat"
            />
            <el-table-column
              label="出入库标识"
              align="center"
              prop="outInFlag"
              :formatter="outInFlagFormat"
            />
            <el-table-column label="批次" align="center" prop="batchNo" />
            <el-table-column label="数量" align="center" prop="num" />
            <el-table-column label="重量" align="center" prop="weight" />
            <el-table-column label="条形码" align="center" prop="barcode" />
            <el-table-column label="操作者" align="center" prop="createBy" />
            <el-table-column label="操作时间" align="center" prop="createTime">
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
                }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="totalDetail > 0"
            :total="totalDetail"
            :page.sync="queryDetailParams.pageNum"
            :limit.sync="queryDetailParams.pageSize"
            @pagination="getDetailList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listArriveBillDetail } from "@/api/material/arriveBillDetail";
import { listMaterialOutInDetail } from "@/api/material/materialOutInDetail";
export default {
  name: "MaterialInStock",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      materialUnitOptions: [],
      billStatusOptions: [],
      arriveBillDetailList: [],
      // 出入库类型字典
      outInTypeOptions: [],
      // 出入库标识字典
      outInFlagOptions: [],
      totalDetail: 0,
      materialOutInDetailList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        arriveBillNo: null,
        batchNo: null,
        billStatus: null
      },
      queryDetailParams: {
        pageNum: 1,
        pageSize: 10,
        billNo: null,
        billDetailId: 0,
        materialNo: null,
        outInFlag: "1",
        toString: null
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("bill_status").then(response => {
      this.billStatusOptions = response.data;
    });
    this.getDicts("smes_unit").then(response => {
      this.materialUnitOptions = response.data;
    });
    this.getDicts("out_in_type").then(response => {
      this.outInTypeOptions = response.data;
    });
    this.getDicts("out_in_flag").then(response => {
      this.outInFlagOptions = response.data;
    });
  },
  methods: {
    //获取采购订单明细
    getList() {
      this.loading = true;
      listArriveBillDetail(this.queryParams).then(response => {
        this.arriveBillDetailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询原料出入库列表 */
    getDetailList() {
      this.loading = true;
      listMaterialOutInDetail(this.queryDetailParams).then(response => {
        this.materialOutInDetailList = response.rows;
        this.totalDetail = response.total;
        this.loading = false;
      });
    },
    // 出入库类型字典翻译
    outInTypeFormat(row, column) {
      return this.selectDictLabel(this.outInTypeOptions, row.outInType);
    },
    // 出入库标识字典翻译
    outInFlagFormat(row, column) {
      return this.selectDictLabel(this.outInFlagOptions, row.outInFlag);
    },
    billStatusFormat(row, column) {
      return this.selectDictLabel(this.billStatusOptions, row.billStatus);
    },
    // 原料单位字典翻译
    materialUnitFormat(row, column) {
      return this.selectDictLabel(this.materialUnitOptions, row.materialUnit);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleRowClick(row) {
      this.queryDetailParams.billDetailId = row.rowId;
      this.getDetailList();
    }
  }
};
</script>
